<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pay By Ride - Panel de control</title>

<link rel="stylesheet" type="text/css" href="../css/paybyride.css" media="screen" />
<script type="text/javascript" src="../js/jquery-min.js"></script>
<script type="text/javascript" src="../js/paybyride-jq-extensions.js"></script>
<script type="text/javascript" src="../js/paybyride-control-panel.js"></script>

</head>

<body>
	
	<input type="hidden" id="userid-retrieved">

	<div class="div-header">
		<div class="div-header-content">
			<div class="div-header-logo">
				<a href="/GeoUdimaServer"><img src="../images/header-logo.png" border="0"></a>
			</div>
			<div class="div-header-text">
				Panel de control
				&nbsp;&nbsp;&nbsp;
				<a href="mobileEmulatorLogin.jsp" class="button-grey button-big" target="_blank">Emulador móvil</a>
			</div>
			
		</div>
	</div>

	<div class="div-content">
		<div class="div-left-column-control-panel">
			
			<div id="div-users" class="tool-section tool-section-scrollable">
				<div class="tool-section-header">
					Usuarios
					<span class="tool-section-buttons">
						<img id="btn-refresh-users" src="../images/refresh-button.png" title="Actualizar" class="img-button">
					</span>
				</div>
				<div id="div-users-list" class="tool-section-content">Actualizando usuarios</div>
			</div>
			
			<div id="div-user-gps" class="tool-section tool-section-scrollable">
				<div class="tool-section-header">Datos GPS del usuario seleccionado</div>
				<div id="div-user-gps-data-filter">
					Desde <input type="text" id="txt-gps-data-filter-init-date" class="input-date" maxlength="10">
					Hasta <input type="text" id="txt-gps-data-filter-end-date" class="input-date" maxlength="10">
					<a id="btn-gps-data-filter" class="button-grey">Buscar</a>
				</div>
				<div id="div-user-gps-data" class="tool-section-content">Seleccione un usuario para mostrar sus datos GPS</div>
			</div>
			
		</div>
		
		<div class="div-right-column-control-panel">
			
			<div id="div-user-detail" class="tool-section tool-section-scrollable">
				<div class="tool-section-header">Usuario seleccionado</div>
				<div id="div-user-data" class="tool-section-content">Seleccione un usuario para mostrar su configuración</div>
			</div>
			
			<div id="div-user-map" class="tool-section tool-section-scrollable">
				<div class="tool-section-header">
					Mapa de los datos GPS mostrados
					<span id="map-animation-controls" class="tool-section-buttons">
						<img id="btn-play-map-animation" src="../images/play-button.png" title="Play" class="img-button">
						<img id="btn-pause-map-animation" src="../images/pause-button.png" title="Pause" class="img-button">
						<img id="btn-stop-map-animation" src="../images/stop-button.png" title="Stop" class="img-button">
						&nbsp;&nbsp;
						<span id="animation-speed-container">velocidad x1</span>
						<img id="btn-minus-speed-map-animation" src="../images/minus-button.png" title="Reducir velocidad" class="img-button">
						<img id="btn-plus-speed-map-animation" src="../images/plus-button.png" title="Aumentar velocidad" class="img-button">
					</span>
				</div>
				<div id="div-user-map-data" class="tool-section-content">
					<div id="map-canvas"></div>
				</div>
			</div>
			
		 </div>	
	</div>

</body>

</html>